<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '银行卡',
    enablePullDownRefresh: true,
  },
}
</route>
<template>
  <div class="bank">
    <div class="tip">
      提现银行卡：目前账户可提现银行卡仅支持绑定一张，若要更换提现银行卡，请点击“设为提现卡”进行变更
    </div>

    <div class="card">
      <wd-swipe-action>
        <div class="content">
          <image class="logo" src="https://img.js.design/assets/smartFill/img306164da746310.jpg" />
          <div class="flex-1">
            <div class="name">中国工商银行</div>
            <div class="no">**** **** **** 7055</div>
          </div>
          <div class="opt">设为提现卡</div>
        </div>
        <template #right>
          <view class="action active" @click="deleteBank()">删除</view>
        </template>
      </wd-swipe-action>
    </div>

    <div class="card">
      <wd-swipe-action>
        <div class="content">
          <image class="logo" src="https://img.js.design/assets/smartFill/img306164da746310.jpg" />
          <div class="flex-1">
            <div class="name">中国工商银行</div>
            <div class="no">**** **** **** 7055</div>
          </div>
          <div class="opt dis">设为提现卡</div>
        </div>
        <template #right>
          <view class="action active">删除</view>
        </template>
      </wd-swipe-action>
    </div>

    <div class="card active" @click="to(`/pages-sub/system/bank/add`)">
      <div class="content justify-center">
        <div class="name">
          <span class="i-carbon-add-filled text-[46rpx]"></span>
          添加银行卡
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { showModal } from '@/utils/index'
import { to } from '@/utils/page'

onShow(() => {
  uni.startPullDownRefresh()
})
// 下拉刷新
onPullDownRefresh(() => {
  setTimeout(() => {
    uni.stopPullDownRefresh()
  }, 1000)
})

function deleteBank() {
  showModal({
    title: '警告',
    content: '确定要删除该银行卡吗？',
  }).then(() => {
    console.log(1)
  })
}
</script>
<style lang="scss" scoped>
.bank {
  box-sizing: border-box;
  min-height: 100vh;
  padding: 28rpx 30rpx;
  background-color: var(--bgc4);

  .tip {
    padding: 19rpx;
    margin-bottom: 36rpx;
    font-size: 23rpx;
    color: #ffaa00;
    background: #fff8f2;
    border-radius: 23rpx;
  }

  .card {
    margin-bottom: 28rpx;
    overflow: hidden;
    background-color: #fff;
    border-radius: 30rpx;
    .content {
      display: flex;
      align-items: center;
      padding: 40rpx 24rpx;
      .logo {
        width: 92rpx;
        height: 92rpx;
        margin-right: 20rpx;
        border-radius: 50%;
      }
      .name {
        font-size: 30rpx;
        line-height: 38rpx;
        color: var(--color1);
      }
      .no {
        font-size: 27rpx;
        color: var(--color4);
      }
      .opt {
        font-size: 27rpx;
        color: var(--color1);
        &.dis {
          color: var(--color4);
        }
      }
    }
    .action {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 160rpx;
      height: 100%;
      color: #fff;
      background-color: var(--sc2);
    }
  }
}
</style>
